<!-- 进度条组件 -->
<template>
	<view class="process-bar-container">
		<view class="process-bar-inner">
			<view v-if="props.percent > 0" class="process-bar-content" :style="{ width: props.percent + '%' }"></view>
		</view>
		<view v-if="props.isShow" class="process-bar-percent">{{ `${props.percent}%` }}</view>
	</view>
</template>

<script setup>
	import { defineProps } from 'vue'
	const props = defineProps({
		// 进度条百分比
		percent: {
			type: Number,
			default: 0
		},
		isShow:{
			type:Boolean,
			default:true
		}
	})
</script>

<style lang="less" scoped>
	.process-bar-container{
		display: flex;
		align-items: center;
		justify-content: space-between;
	}
	.process-bar-inner{
		width: 100%;
		padding: 5rpx;
		border-radius: 45rpx;
		border: 1rpx solid #A80700;
		min-height: 40rpx;
		overflow: hidden;
		.process-bar-content{
			border-left: 1rpx solid #A80700;
			border-right: 1rpx solid #A80700;
			height: 40rpx;
			border-radius: 45rpx;
			background-image: url('https://jdyd-marketing-public.oss-cn-hangzhou.aliyuncs.com/yx/74d14946-fa2d-4a21-bb53-0be496491bd7.png');
			background-position: 0 0;
			background-size: 40rpx 40rpx;
			box-sizing: border-box;
			max-width: 100%;
		}
	}
	.process-bar-percent{
		color: #FF3C22;
		margin-left: 20rpx;
	}
</style>